<template>
  <el-card>
    <div class="ele-cell demo-monitor-tool">
      <div class="ele-cell-content">
        <el-tabs v-model="saleSearch"
                 class="demo-monitor-tabs"
                 @tab-click="onSaleTypeChange">
          <el-tab-pane name="first"
                       label="充值" />
          <el-tab-pane label="消费"
                       name="second" />
          <el-tab-pane label="用户"
                       name="third" />
        </el-tabs>
      </div>

      <div :class="['ele-inline-block']"
           style="width: 260px; margin-left: 10px">
        <div class="block">
          <el-date-picker v-model="month"
                          @change="selsctMonth"
                          type="month"
                          value-format="yyyy-MM"
                          placeholder="选择月">
          </el-date-picker>
        </div>
      </div>
    </div>
    <el-divider />
    <el-row>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 18 }">
        <div class="demo-monitor-title">
          <span v-if="saleSearch === 'first'">充值</span>
          <span v-if="saleSearch === 'second'">消费</span>
          <span v-if="saleSearch === 'third'">用户</span>
        </div>
        <v-chart ref="saleChart"
                 style="height: 190px"
                 :option="saleChartOption" />
        <!-- <el-empty :image-size="65"
                  v-else
                  description="暂无数据"></el-empty> -->
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import moment from 'moment';
import {
  getTopUpTotal,
  getConsumptionTotal,
  workbench
} from '@/api/mainPlatform/index';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { getSaleroomList } from '@/api/dashboard/analysis';
import { echartsMixin } from '@/utils/echarts-mixin';

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

export default {
  components: { VChart },
  mixins: [echartsMixin(['saleChart'])],
  data () {
    return {
      // 销售量搜索参数
      saleSearch: 'first',
      // 销售量趋势数据
      saleroomData1: [],
      // 访问量趋势数据
      saleroomData2: [],
      // 门店排名数据
      saleroomRankData: [
        { name: '工专路 1 号店', value: '323,234' },
        { name: '工专路 2 号店', value: '323,234' },
        { name: '工专路 3 号店', value: '323,234' },
        { name: '工专路 4 号店', value: '323,234' },
        { name: '工专路 5 号店', value: '323,234' },
        { name: '工专路 6 号店', value: '323,234' },
        { name: '工专路 7 号店', value: '323,234' }
      ],
      // 销售额柱状图配置
      saleChartOption: {},
      month: '',
      hasData: true
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.getSaleroomData();
  },
  methods: {
    /* 获取销售量数据 */
    async getSaleroomData () {
      this.hasData = true;
      const now = moment();
      const currentMonth = now.format('YYYY-MM');
      this.month = currentMonth;

      const res = await getTopUpTotal({
        createDate: this.month
      });

      console.log(res);
      this.saleChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: res.length
              ? res.map((d) => d.createDate)
              : (this.hasData = false)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],

        series: [
          {
            type: 'bar',
            data: res.length
              ? res.map((d) => d.discountedPriceTotal)
              : (this.hasData = false)
          }
        ]
      };
    },
    async selsctMonth (month) {
      this.hasData = true;
      console.log(month);
      this.month = month;

      if (this.saleSearch == 'first') {
        const res = await getTopUpTotal({
          createDate: this.month
        });
        console.log(res);
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: res.length
                ? res.map((d) => d.createDate)
                : (this.hasData = false)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: res.length
                ? res.map((d) => d.discountedPriceTotal)
                : (this.hasData = false)
            }
          ]
        };
      }
      if (this.saleSearch == 'second') {
        const res = await getConsumptionTotal({
          createdAt: this.month
        });
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: res.length
                ? res.map((d) => d.createDate)
                : (this.hasData = false)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: res.length
                ? res.map((d) => d.disbursementsTotal)
                : (this.hasData = false)
            }
          ]
        };
        console.log(res);
      }
      if (this.saleSearch == 'third') {
        const res = await workbench({
          createTime: this.month
        });
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: res.length
                ? res.map((d) => d.createDate)
                : (this.hasData = false)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: res.length
                ? res.map((d) => d.count)
                : (this.hasData = false)
            }
          ]
        };
        console.log(res);
      }
    },
    /* 销售量tab选择改变事件 */
    async onSaleTypeChange (tab) {
      this.hasData = true;
      console.log(tab);
      if (tab?.label == '充值') {
        const res = await getTopUpTotal({
          createDate: this.month
        });
        console.log(res);
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: res.length
                ? res.map((d) => d.createDate)
                : (this.hasData = false)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: res.length
                ? res.map((d) => d.discountedPriceTotal)
                : (this.hasData = false)
            }
          ]
        };
      }
      if (tab?.label == '消费') {
        const res = await getConsumptionTotal({
          createdAt: this.month
        });
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: res.length
                ? res.map((d) => d.createDate)
                : (this.hasData = false)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: res.length
                ? res.map((d) => d.disbursementsTotal)
                : (this.hasData = false)
            }
          ]
        };
        console.log(res);
      }
      if (tab?.label == '用户') {
        const res = await workbench({
          createTime: this.month
        });
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: res.length
                ? res.map((d) => d.createDate)
                : (this.hasData = false)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: res.length
                ? res.map((d) => d.count)
                : (this.hasData = false)
            }
          ]
        };
        console.log(res);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;

  .demo-monitor-tabs {
    height: 51px;
  }

  :deep(.el-tabs__item) {
    height: 51px;
    line-height: 51px;
    font-size: 15px;
  }

  :deep(.el-tabs__nav-wrap:after) {
    display: none;
  }
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名 item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
</style>
